<template>
  <div>
    <main class="global-main">
      <k-loading :show="!cspecial.id"></k-loading>
      <div class="agency-pc-wrapper" v-if="cspecial.id" >
        <ksd-banner-vip></ksd-banner-vip>
        <ksd-special-advice :notice="cspecial.noticeMsg"></ksd-special-advice>
        <section :style="{'height':widthFlag?'480px':'380px'}">
          <div class="kc-agency-hd-pc default">
            <div class="agency-hd-bg-color" :style="{'background':'url('+cspecial.bgColor+')'}"  style="background-size: cover"></div>
          </div>
        </section>
        <div class="banner-inner wrapper-banner">
          <div class="list-item">
            <div class="time"><span class="num">{{cspecial.stimer}}<span>+</span></span><span class="numSuffix">小时</span></div>
            <div class="name">精讲视频</div></div>
          <div class="list-item">
            <div class="time"><span class="num">{{cspecial.viewcount || 0}}</span><span class="numSuffix">人</span></div>
            <div class="name">已学习人数</div></div>
          <div class="list-item">
            <div class="time"><span class="txt">架构演进</span></div>
            <div class="name">项目架构设计与落地能力</div></div>
          <div class="list-item">
            <div class="time"><span class="txt">永久</span></div>
            <div class="name">课程观看权益</div></div>
          <div class="list-item">
            <div class="time"><span v-if="cspecial.buyFlag > 0" class="green">已订阅</span><span v-else>未订阅</span></div>
            <div class="name">是否订阅</div></div>
          <div class="list-item">
            <div class="time"><span class="txt">持续更新</span></div>
            <div class="name">课程更新</div></div>
        </div>
        <div class="section-content is-fill" id="four" >
          <section class="pd" style="padding-bottom: 200px">
            <div class="center-block wrapper-banner c333">
              <div class="agency-info-ctn flex justify-content-between" style="align-items: flex-end">
                <div class="agency-info flex1 flex">
                  <div>
                    <div  class="agency-desc mt5 flex align-items">
                      <span class="btn-share pointer" @click="handleUserFav"  :class="[cspecial.favFlag == 1? 'greenall':'c666']"><i class="iconfont icon-star fz14 mr3 pr tp1"></i>收藏({{ cspecial.favNum }})</span>
                      <span class="btn-share ml15 pointer c666"><span class="pr tp1"><i class="iconfont icon-aixin fz14 mr3 pr tp1"></i>已有{{cspecial.viewcount || 0}}人在学</span></span>
                      <span class="btn-share ml15 pointer c666"><i class="iconfont icon-shijian fz14 mr3 pr tp1"></i>时长：<span class="fb">{{ cspecial.stimer }}小时</span> </span>
                      <span class="btn-share ml15 pointer copy-btn c666" title="点我复制" @click="handleClipboardText($event)" data-clipboard-target="#copyhtml"><i class="iconfont icon-fuzhi fz14 mr3 pr tp1"></i>复制</span>
                      <div class="ml20 pr ftp4">
                        <k-star disable :num="Math.floor(cspecial.score)" color="cm-strong">
                          <span class="fz16 ml3 fb c333">{{ cspecial.score }}分</span>
                          <span class="fz12 red ml10" v-if="cspecial.vipFlag==2">VIP免费</span>
                          <span class="fz12 red ml10" v-if="cspecial.vipFlag==3">SVIP免费</span>
                        </k-star>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="agency-bottom-ctn">
                  <div class="kc-agency-hd-count-ctn pc mr20">
                    <a class="buybtn mainbg2" v-if="cspecial.gitHubLink && cspecial.buyFlag > 0" :href="cspecial.gitHubLink" target="_blank">
                      <i class="iconfont icon-github fz14  mr4"></i>
                      <span class="fz14 fb">GitHub仓库</span>
                    </a>
                    <a class="buybtn mainbg2 ml15" v-if="cspecial.giteeLink && cspecial.buyFlag > 0" :href="cspecial.giteeLink" target="_blank">
                      <i class="iconfont icon-gitee fz18 pr tp2  mr4"></i>
                      <span class="fz14 fb">Gitee码云</span>
                    </a>
                    <a class="buybtn mainbg2 ml15" id="two" v-if="cspecial.tryLink" :href="cspecial.tryLink" target="_blank">
                      <i class="iconfont icon-shouye fz14  mr4"></i>
                      <span class="fz14 fb">体验地址</span>
                    </a>
                    <a class="buybtn mainbg ml15" id="three" v-if="cspecial.panLink && cspecial.buyFlag > 0 && userStore.isLogin"  target="_blank" :href="cspecial.panLink">
                      <i class="iconfont icon-wangpan fz14  mr4"></i>
                      <span class="fz14 fb" v-if="cspecial.buyFlag==0">项目网盘</span>
                      <n-tooltip trigger="hover"  v-else>
                        <template #trigger>
                          <span class="fz12 fb">项目网盘<span class="fz12 ml5" v-if="cspecial.panPwd"></span></span>
                        </template>
                        密码是：{{cspecial.panPwd}}
                      </n-tooltip>
                    </a>
                    <span class="buybtn pr ml15" style="padding:0"  v-if="cspecial.buyFlag==0 && userStore.isLogin">
                        <span class="buytip" v-if="cspecial.noticeMsg && cspecial.noticeMsg!=''">
                          <a href="#n50" class="red"><span class="c333">{{cspecial.noticeMsg}}</span><span class="fz12 ml5">点击咨询>></span></a>
                        </span>
                        <a href="javascript:void(0);" id="one" style="padding:14px 18px;line-height: 42px;" @click.prevent="handleOpenPayDialog" >
                          <span>
                            <i class="iconfont icon-gouwuchekong fz14  mr4"></i>
                            <span class="fz14 fb">项目订阅：￥{{cspecial.price}}</span>
                            <span class="fz12 textdel ml5">￥{{cspecial.realprice}}</span>
                          </span>
                        </a>
                      </span>
                    <span class="buybtn ml15" href="javascript:void(0);" v-if="cspecial && cspecial.studySpecial && cspecial.buyFlag>0 && cspecial.studySpecial.percent > 0">
                        <span  class="fz14 fb">学习总进度：{{(cspecial.studySpecial.percent * 1).toFixed(1)}}%</span>
                      </span>
                  </div>
                </div>
              </div>
            </div>
            <!--课程介绍-->
            <section class="gems-render-box">
              <div id="n0" class="__impage-component-actions-proxy ">
                <section class="gems-section wrapper-banner gems-section-pc">
                  <div class="gems-section-content  mt10">
                    <div class="fz16 mt20" style="line-height: 28px;" v-html="cspecial.intro"></div>
                  </div>
                  <div class="studyed-box mt30" v-if="cspecial.buyFlag==0">
                    <div class="left">
                      <div class="gems-section-title">你可以学到?</div>
                      <ul class="content-box">
                        <li v-for="(item,index) in cspecial.studyList" :key="index">{{ item }}</li>
                      </ul>
                    </div>
                  </div>
                  <div class="txnlea-oob" v-if="cspecial.buyFlag==0 && false">
                    <div class="box">
                      <div class="txn-item" v-if="cspecial.suitable && cspecial.suitable!=''">
                        <div class="item-title">适合人群</div>
                        <div class="tipbox-cont-box">
                          <div class="cont-box" v-for="(item,index) in cspecial.suitable.split('||') " :key="index">
                            <div class="tipbox-cont text-center">{{item}}</div>
                          </div>
                        </div>
                      </div>
                      <div class="txn-item" v-if="cspecial.teachnology && cspecial.teachnology!=''">
                        <div class="item-title">技术储备</div>
                        <div class="tipbox-cont-box">
                          <div class="cont-box" v-for="(item,index) in cspecial.teachnology.split('||') " :key="index">
                            <div class="tipbox-cont">{{item}}</div>
                          </div>
                        </div>
                      </div>
                      <div class="txn-item" v-if="cspecial.envionments && cspecial.envionments!=''">
                        <div class="item-title">环境参数</div>
                        <div class="tipbox-cont-box">
                          <div class="cont-box">
                            <div class="tipbox-cont"  v-for="(item,index) in cspecial.envionments.split('||') " :key="index">
                              <span class="cont-l">{{item}}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div  v-if="cspecial.buyFlag==0">
                    <div class="course-case-container  mt30" v-if="cspecial.imgs && cspecial.imgs!='' && false">
                      <div class="wrapper-banner">
                        <div class="gems-section-title"> 案例展示</div>
                        <div class="case-box">
                          <n-carousel show-arrow autoplay>
                            <template v-for="item in cspecial.imgs"  :key="item">
                              <img
                                  class="carousel-img"
                                  :src="item"
                              >
                            </template>
                          </n-carousel>
                        </div>
                      </div>
                    </div>
                  </div>

                </section>
              </div>

              <template v-if="allBindList && allBindList.length > 0">
                <template v-for="(bind,index) in allBindList">
                  <!--课程课程-->
                  <div :id="'n'+(index+1)" v-if="bind.type==1" class="__impage-component-actions-proxy">
                    <section class="gems-section gems-section-pc">
                      <div class="gems-section-header gems-section-header-tit wrapper-banner">
                        <em class="gems-section-title mt20">{{bind.title}}</em>
                        <div class="gems-section-more" v-if="cspecial.buyFlag == 0">
                          <button class="buybtn" v-if="bind.buyFlag == 0 && false" @click="handleOpenPayBindDialog(bind)">
                            <i class="iconfont icon-gouwuchekong fz18  mr5"></i>
                            <span class="fz12 fb">单独订阅价格：￥{{bind.price}}</span>
                            <span class="fz12 textdel ml5">￥{{bind.realprice}}</span>
                          </button>
                          <nuxt-link to="/user/buy" target="_blank" title="点击查看订单" class="buybtn green" v-if="false">
                            <i class="iconfont icon-zhankai fz16 cof mr5"></i>
                            <span class="fz16 fb cof">已订阅</span>
                          </nuxt-link>
                        </div>
                      </div>
                      <div class="gems-section-content  wrapper-banner">
                        <div class="desc mb20 fz16" v-if="bind.description && bind.description!=''" style="padding: 20px;background:#f2f7fa;border-radius: 16px;">{{bind.description}}</div>
                        <ksd-note-special :buy="cspecial.buyFlag == 1" :data="bind.children" :url="'/special/'+cspecial.path" :show="cspecial.buyFlag==1"></ksd-note-special>
                      </div>
                    </section>
                  </div>
                  <!--课程资源-->
                  <div :id="'n'+(index+1)" v-if="bind.type==2" class="__impage-component-actions-proxy">
                    <section class="gems-section gems-section-pc">
                      <div class="gems-section-header gems-section-header-tit wrapper-banner">
                        <em class="gems-section-title"><i class="iconfont icon-jieduan fz22 fb pr tp2 mr5"></i> {{bind.title}}</em>
                        <div class="gems-section-more" v-if="cspecial.buyFlag == 0">
                          <button class="buybtn" v-if="bind.buyFlag == 0" @click="handleOpenPayBindDialog(bind)">
                            <i class="iconfont icon-gouwuchekong fz16  mr5"></i>
                            <span class="fz16 fb">单独订阅价格：￥{{bind.price}}</span>
                            <span class="fz12 textdel ml5">￥{{bind.realprice}}</span>
                          </button>
                          <nuxt-link to="/user/buy" target="_blank" title="点击查看订单" class="buybtn green" v-else>
                            <i class="iconfont icon-zhankai fz16 cof mr5"></i>
                            <span class="fz16 fb cof">已订阅</span>
                          </nuxt-link>
                        </div>
                      </div>
                      <div class="gems-section-content  wrapper-banner">
                        <ksd-downloads-special :data="bind.children"></ksd-downloads-special>
                      </div>
                    </section>
                  </div>
                  <!--课程讲师-->
                  <div :id="'n'+(index+1)"  v-if="bind.type==3" class="__impage-component-actions-proxy">
                    <section class="gems-section gems-section-bg-grey gems-section-pc">
                      <div class="gems-section-header wrapper-banner"><em class="gems-section-title">{{bind.title}}</em></div>
                      <div class="gems-section-content wrapper-banner">
                        <div
                            class="kc-row---ui88rw kc-row-gutter-h-24---gjw3p8 kc-row-gutter-v-24---nbudvm kc-row-align-stretch---szsozo kc-row-justify-start---g7bndv kc-row-equal-split---biozze">
                          <div class="kc-col---oajwb7" v-for="(item,index) in bind.children" :key="item.id">
                            <nuxt-link  to="javascript:void(0);">
                              <div
                                  class="list-item list-item--round list-item--split teacher-card teacher-card-medium list-item--theme-white">
                                <div class="list-item-left">
                                  <div class="list-item-avatar"><img
                                      :alt="item.nickname" class=""
                                      v-lazy="item.avatar">
                                  </div>
                                </div>
                                <div class="list-item-center">
                                  <div class="list-item-title">{{item.nickname}}<span class="ml10 fz12 c999" v-if="item.description">({{item.description}})</span></div>
                                  <div class="list-item-description">
                                    <p>{{item.teacherIntro || "暂无"}}</p>
                                  </div>
                                </div>
                              </div>
                            </nuxt-link>
                          </div>
                        </div>
                      </div>
                    </section>
                  </div>
                </template>
              </template>
              <!--学习交流群-->
              <div id="n50" class="gems-section  gems-section-pc"  v-if="cspecial.clientFlag==1">
                <div class="gems-section-header gems-section-header-tit wrapper-banner">
                  <em class="gems-section-title">客服&交流群</em>
                </div>
                <div class="gems-section-content wrapper-banner">
                  <ksd-special-qun :data="cspecial"></ksd-special-qun>
                </div>
              </div>
              <!--课程评价-->
              <div id="n51" class="gems-section gems-section-pc mt30" v-if="cspecial.commentFlag==1">
                <div class="gems-section-header gems-section-header-tit wrapper-banner"><em class="gems-section-title">课程评价</em>
                </div>
                <div class="gems-section-content wrapper-banner" v-if="cspecial.buyFlag==0">
                  <ksd-special-comment closescore :showeditor="false"  :opid="cspecial.id"></ksd-special-comment>
                </div>
                <div class="gems-section-content wrapper-banner" v-else>
                  <ksd-special-comment closescore  showeditor  :opid="cspecial.id"></ksd-special-comment>
                </div>
              </div>

              <!--课程学习用户-->
              <div id="n4" class="__impage-component-actions-proxy">
                <section class="gems-section gems-section-bg-grey gems-section-pc">
                  <div class="gems-section-header gems-section-header-tit wrapper-banner">
                    <em class="gems-section-title">学习用户</em>
                  </div>
                  <div class="gems-section-content wrapper-banner recommendationbox">
                    <div class="recommendation"  v-for="(item,index) in cspecial.students" :key="item.uuid">
                      <nuxt-link
                          to="javascript:void(0);" class="portrait-box" ><img
                          v-lazy="item.avatar"
                          :alt="item.nickname" class="portrait" >    </nuxt-link>
                      <dl class="mt10">
                        <dt>
                          <nuxt-link  to="javascript:void(0);" :alt="item.nickname">{{item.nickname}}</nuxt-link>
                        </dt>
                      </dl>
                    </div>
                  </div>
                </section>
              </div>
              <div class="wrapper-banner">
                <em class="gems-section-title fz24">购买须知</em>
                <div class="fz16" v-html="cspecial.buyList"></div>
              </div>
            </section>
          </section>
        </div>
      </div>
      <div id="copyhtml" style="position: fixed;top:-1000px;">
        课程标题：《{{ cspecial.title }}》<br/>
        课程地址：https://www.study512.com/special/{{ cspecial.path }}<br/>
        平台来源：学习512-点燃科技启蒙之火，引领编程新潮。致力于帮助有梦想的年轻人获取学习价值<br/>
        商业转载请联系作者获得授权，非商业转载请注明出处。
      </div>
      <teleport to="body">
        <ksd-special-pay ref="payRef"></ksd-special-pay>
      </teleport>
      <teleport to="body">
        <ksd-special-bind-pay ref="payBindRef"></ksd-special-bind-pay>
      </teleport>
      <div  class="navigation-bar-content" style="bottom: 100px;" v-if="bscrollFlag && bindList && bindList.length > 0">
        <div  class="navigation-bar ng-star-inserted" style="visibility: visible;">
          <div  class="text pointer ng-star-inserted" @click="handleChangeTab(0)" :class="[currentIndex==0?'selected':'']" title="课程介绍"> 课程介绍 </div>
          <div  class="text pointer ng-star-inserted" v-for="(bind,index) in bindList" @click="handleChangeTab(index+1)" :class="[currentIndex==index+1?'selected':'']" :key="bind.id"  :title="bind.title">阶段{{index+1}}：{{bind.title}} </div>
          <div v-if="cspecial.clientFlag==1" @click="handleChangeTab(50)" :class="[currentIndex==50?'selected':'']" class="text pointer last-child ng-star-inserted" title="客服&交流群"> 客服&交流群 </div>
          <div v-if="cspecial.commentFlag==1" @click="handleChangeTab(51)" :class="[currentIndex==51?'selected':'']"  class="text pointer last-child ng-star-inserted" title="课程评价"> 课程评价 </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script setup>
import Clipboard from "clipboard";
const userStore =  useStore.userState()
const route = useRoute()
const specialId = route.params.id
const currentIndex = ref(0)
const cspecial = ref({id:''})
const bindList = ref({})
const allBindList = ref({})
const payRef = ref(({}))
const payBindRef = ref(({}))
const scrollFlag  = ref(false)
const bscrollFlag = ref(false)
const widthFlag = ref(false)
const color =ref("#1c1000")

function numberToChinese(num) {
  const chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
  const chineseUnits = ['', '十', '百', '千', '万', '亿', '兆'];

  if (num === 0) {
    return chineseNums[0];
  }

  const digits = Math.floor(num).toString().split('');
  const len = digits.length;

  let result = '';

  for (let i = 0; i < len; i++) {
    const digit = parseInt(digits[i]);
    const unit = chineseUnits[len - 1 - i];

    if (digit !== 0) {
      result += chineseNums[digit] + unit;
    } else {
      if (result[result.length - 1] !== chineseNums[0]) {
        result += chineseNums[digit]
      }
    }
  }

  return result;
}


const saveTime = function (memoryVideo,currentTime) {
  localStorage.setItem(memoryVideo, currentTime);
}

const getTime = function (memoryVideo) {
  //return返回的是自定义起播时间
  return localStorage.getItem(memoryVideo)
}


const handleChangeTab = (index) =>{
  currentIndex.value = index
  var stop = getElementOffsetTop(getDom("n"+index))
  window.scroll(0,stop  - 90)
  localStorage.setItem("ksd-ddd-stop",stop  - 90);
}


function getElementOffsetTop(element) {
  if (!element) return 0;
  return element.offsetTop + getElementOffsetTop(element.offsetParent);
}

function unique(arr) {
  if (!Array.isArray(arr)) {
    return
  }
  let res = [arr[0]]
  for (let i = 1; i < arr.length; i++) {
    let flag = true
    for (let j = 0; j < res.length; j++) {
      if (arr[i].type === res[j].type) {
        flag = false;
        break
      }
    }
    if (flag) {
      res.push(arr[i])
    }
  }
  return res
}

const handleLoadDetail = async()=>{
  try {
    const resp = await useLoadSpecialStudyDetail(specialId)
    cspecial.value = resp.data
    if(resp.data.id=='10003')color.value = "#c00c03"

    if(cspecial.value.imgs){
      cspecial.value.imgs = cspecial.value.imgs.split("||")
    }

    if(cspecial.value.studyList){
      cspecial.value.studyList = cspecial.value.studyList.split("||")
    }

    if(resp.data.bindList && resp.data.bindList.length > 0) {
      allBindList.value = resp.data.bindList
      bindList.value = resp.data.bindList
    }

    useHead({
      title:cspecial.value.title
    })
  }catch (e){
    useMessage().error(e.message)
    showError({statusCode:404,statusMessage:e.message})
  }
}

// 复制
const handleClipboardText = (e) => {
  const clipboard = new Clipboard('.copy-btn')
  // 复制成功
  clipboard.on('success', () => {
    useMessage().success('内容已复制到剪切板，可粘贴')
    // 释放内存
    clipboard.destroy()
  })
  // 复制失败
  clipboard.on('error', () => {
    useMessage().error('代码复制失败')
    // 释放内存
    clipboard.destroy()
  })
}

// 收藏
const handleUserFav = debounce(() => {
  useLoginDialog().then(async (userStore) => {
    const params = {"opid": cspecial.value.id}
    const resp = await useSaveCancelSpecialFavApi(params)
    cspecial.value.favFlag = resp.data
    if (resp.data == 1) {
      cspecial.value.favNum++
    } else {
      cspecial.value.favNum--
    }
  })
}, 300)

// 打开课程支付
const handleOpenPayDialog = async () => {
  // 需要登录
  useLoginDialog().then(()=>{
    // 打开支付窗口
    payRef.value.handleOpen(cspecial.value.id,cspecial.value.price,cspecial.value.sumPrice,cspecial.value.title)
  })

}

const handleOpenPayBindDialog = async (item) => {
  // 需要登录
  useLoginDialog().then(()=>{
    // 打开支付窗口
    payBindRef.value.handleOpen(cspecial.value.id,item.id,item.price)
  })
}

definePageMeta({
  layout: "nindex"
})


onMounted(()=>{
  handleLoadDetail()
  if(process.client) {
    var dom = document.querySelector(".navbar");
    if (dom) dom.className = "navbar"
    widthFlag.value = window.innerWidth > 1920
    window.addEventListener("resize", function (e) {
      widthFlag.value = window.innerWidth > 1920
    })

    window.addEventListener("scroll", function (e) {
      var stop = st || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (stop >= 50) {
        scrollFlag.value = true
      } else {
        scrollFlag.value = false
      }

      if (stop > 100) {
        bscrollFlag.value = true
      } else {
        bscrollFlag.value = false
      }
      var st = localStorage.getItem("ksd-ddd-stop") || stop
      if (st < 1100) currentIndex.value = 0
      if(isInViewport(getDom("n1"))) currentIndex.value = 1
      if(isInViewport(getDom("n2"))) currentIndex.value = 2
      if(isInViewport(getDom("n3"))) currentIndex.value = 3
      if(isInViewport(getDom("n4"))) currentIndex.value = 4
      if(isInViewport(getDom("n5"))) currentIndex.value = 5
      if(isInViewport(getDom("n6"))) currentIndex.value = 6
      if(isInViewport(getDom("n7"))) currentIndex.value = 7
      if(isInViewport(getDom("n8"))) currentIndex.value = 8
      if(isInViewport(getDom("n9"))) currentIndex.value = 9
      if(isInViewport(getDom("n10"))) currentIndex.value = 10
    })
  }
})

function isInViewport(element) {
  if(!element)return
  const rect = element.getBoundingClientRect();
  if(!react)return
  return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

</script>

<style scoped lang="scss">

.navigation-bar-content {
  position: fixed;
  top: -12px;
  left:148px;
  z-index: 101;
  height: 100%;
  display: flex;
  align-items: center;
}

.navigation-bar {
  position: relative;
  font-size: 13px;
  line-height: 1;
  animation: showBar 2s;
  visibility: hidden;
}

.navigation-bar:before {
  position: absolute;
  display: block;
  content: "";
  width: 2px;
  height: 100%;
  background: #d6d6d6;
  transition: top .5s;
  left: 0;
  top: 0;
}

.navigation-bar .text {
  padding-left: 16px;
  margin-bottom: 10px;
  overflow: hidden;
  line-height: 24px;
  color: #777;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.navigation-bar .text.selected {
  color: #000;
  position: relative;
  font-weight: bold;
}

.navigation-bar .text.selected:before {
  position: absolute;
  display: block;
  content: "";
  width: 2px;
  height: 24px;
  background: #000;
  transition: top .5s;
  left: 0;
  top: 0;
}

.pointer {
  cursor: pointer;
}

.gems-section-title,
.txnlea-oob .txn-item .item-title,
.kc-agency-hd-pc .pc-tab-item[class*=active-],
.title-big-mode, .title-box{color:#000!important;opacity: 0.9}
.recommendationbox{display:flex;flex-wrap:wrap;justify-content:flex-start;}
.recommendation{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;text-align:center;margin-bottom:20px;margin-right:30px;}
.recommendation .portrait{width:44px;height:44px;border-radius:22px;border:1px solid #e8e8ed;}
.recommendation dl{-webkit-box-flex:1;-ms-flex:1;flex:1}
.recommendation dl dt a{font-weight:400;color:#222226}
.recommendation dl dd{font-size:12px;color:#999aaa}
.recommendation dl dd,.recommendation dl dt{overflow:hidden;white-space:normal;word-break:break-all;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.recommendation .recommendation-btn{cursor:pointer;text-align:center;width:98px;height:24px;background:#fff;line-height:24px;border-radius:12px;border:1px solid #ccccd8;margin-top:8px;font-size:12px;}
.recommendation .recommendation-btn:hover{border-color:#555666}
.recommendation .recommendation-btn.active{color:#999aaa}
.kc-agency-hd-avatar-pc{overflow:hidden;background-color:#fff;-webkit-flex:0 0 auto;flex:0 0 auto;box-sizing:border-box}
.kc-agency-hd-avatar-pc{height:98px;width:88px;border:3px solid #fff;border-radius:15px}
.kc-agency-hd-avatar-pc img{height: 100%}
.kc-agency-hd-count-ctn{font-size:12px;line-height:16px;display:-webkit-flex;display:flex;-webkit-flex-wrap:nowrap;flex-wrap:nowrap}
.kc-agency-hd-count-ctn .item{display:-webkit-inline-flex;display:inline-flex;-webkit-flex-direction:row;flex-direction:row;margin-right:12px;white-space:nowrap}
.kc-agency-hd-count-ctn .item .title{color:#586470;margin-right:4px}
.kc-agency-hd-count-ctn .item .val{color:#0f1419;font-weight:600}
.kc-agency-hd-count-ctn.pc .item{-webkit-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-align-items:center;align-items:center;margin-right:48px}
.kc-agency-hd-count-ctn.pc .item:last-of-type{margin-right:40px}
.kc-agency-hd-count-ctn.pc .item .title{font-size:12px;line-height:18px;margin-right:0;font-weight:400}
.kc-agency-hd-count-ctn.pc .item .val{font-size:16px;margin-bottom:4px;line-height:18px;font-weight:600}
.kc-course-classification{position:relative;padding:8px 0}
.kc-course-classification .btn-classification{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:16px;font-weight:500;height:22px;line-height:22px;padding:0 20px;color:#0f1419;cursor:pointer}
.kc-course-classification .btn-classification .icon-arrow{color:#0f1419;margin-left:4px}
.kc-course-classification .classification-popup-ctn{display:none;position:absolute;top:100%;left:0;z-index:10}
.kc-course-classification:hover .btn-classification,.kc-course-classification:hover .btn-classification .icon-arrow{color:#18a058}
.kc-course-classification:hover .classification-popup-ctn{display:block}
.kc-classification-cascader{--cascadertextnormal:#3e454d;padding:12px 12px 12px 16px;background:#fff;box-shadow:0 8px 30px rgba(0,80,179,.12);border-radius:8px}
.kc-classification-cascader .cascader-item{width:100%;min-width:116px;margin-bottom:12px;color:var(--cascadertextnormal);cursor:pointer}
.kc-classification-cascader .cascader-item:hover{color:#18a058}
.kc-classification-cascader .cascader-item:last-child{margin-bottom:0}
.kc-agency-hd-pc{position:relative;height: 100%;}
.kc-agency-hd-pc .center-block{position:relative;}
.kc-agency-hd-pc .agency-info-ctn{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:flex-start;justify-content:flex-start}
.kc-agency-hd-pc .agency-info-ctn .agency-info{color:#fff}
.kc-agency-hd-pc .agency-info-ctn .agency-name-ctn{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;margin:0 0 8px}
.kc-agency-hd-pc .agency-info-ctn .agency-name{height:34px;line-height:34px;font-weight:600;font-size:22px;margin:0 8px 0 0}
.kc-agency-hd-pc .agency-info-ctn .agency-desc{height:28px;line-height:28px;font-weight:400;font-size:14px;overflow:hidden;margin:0}
.kc-agency-hd-pc .section-share{position:absolute;top:32px;right:0}
.kc-agency-hd-pc .btn-share{box-sizing:border-box;height:28px;line-height:1;background:rgba(20,23,26,.4);border:1px solid rgba(245,248,250,.2);border-radius:22px;font-size:12px;padding:4px 12px;text-align:center;color:#fff;cursor:pointer}
.kc-agency-hd-pc .agency-tabs{margin-left:20px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}
.kc-agency-hd-pc .pc-tab-item{padding:0 12px;font-weight:600;font-size:16px;transition:1s;}
.kc-agency-hd-pc .pc-tab-item[class*=active-]{color:#18a058;font-size:18px;font-weight:bold;}
.kc-agency-hd-pc.default .agency-hd-bg-color{height:100%;}
.kc-agency-hd-pc.default .btn-share{background:rgba(62,69,77,.14);border:1px solid transparent;color:var(--defaultsharebtntext)}
.kc-agency-hd-pc.default .agency-info-ctn .agency-name{color:var(--defaultagencyname)}
.kc-agency-hd-pc.default .agency-info-ctn .agency-desc{color:var(--defaultagencydesc)}
@font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64,d09grgabaaaaaazgabaaaaaadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabgrlrnaaagraaaaboaaaaci6qhkuderuyaaawgaaaaiwaaacqayabxr1bpuwaabhqaaaauaaaanuay7+xhu1vcaaafxaaaafaaaabm2fpczu9tlziaaahcaaaasgaaagbp9v5ry21hcaaaakqaaaciaaabyt6f0cbjdnqgaaaczaaaaaqaaaaeabebrgdhc3aaaawyaaaacaaaaaj//wadz2x5zgaaaywaaadmaaad2mhtryvozwfkaaabbaaaadaaaaa2e2+eowhozweaaagcaaaahwaaacqc9gdzag10eaaaaigaaaazaaaargjkabfsb2nhaaac0aaaafoaaabafqaugg1hehaaaag8aaaahwaaacaacababmftzqaaa/gaaae5aaacxvfdbwlwb3n0aaafnaaaagiaaace5s74hxjay2bkygaaypf5hu/j+w2+mnazmydazax6qjd6/4//bxj5ga8aurwmygkapywl13jay2bkyga88p8agx4j+/8fqdyfa1aebwgdaib2booaenpjygrgynbh4gdgygabemniabjzynadcqaacwgasqb42mngyfzcoigblygb0ycxjygbwr1kf2wqzghhygbiygvmgafgbiqqkoaawtdaombqxxjg/wegpcydda4wnua2ccgwsaaao4el6gaaenpj2m0gyaacqxggnwbkz2d4/wma+xkddgaaahjay2bgygaaybkgrgyqiahygmf8fgyhim3dwmhabgqrmogywdlem1t9/w8ubfemglze////p/5//f/v/xv+r4eaaaembaxwiuymimhegkyayjucsdawslkxc3bycfpw8jeqa/gzbasfhevexcqljkwkzwtl5buulzrvvnxuntqzbgmaamr+e+gaeqfeaaaakgaqacoanaa+aegaugbcagyacab6aiqajgcyakiarac2amaaygduan4a6adyapwbbgeqarobjaeuatgbqgfmavybyafqaxqbfggiazibnagmabibzghsaab42u2nmq6cuaygw568x9aneyygm4mjbhkfaexioavx8apewst4bic4afeaid3vobixdxfpyeza5o+xfi04yadggiuiulcuejk8vho4bsvpdnkthi5qcytdi2sl8znxahlqurnkzdkct8cjlq+rwzsvivczniezsfnp/uznmfpfbnodm2k7mtq45yeazqgp81amggcf3ipqoop0r1sptatbvkfue4hxj97wye+ynwwyxwwu4v1ugwhgo3s1xdzevqwm7et0cfnlgxwfkgr42o2pvwrdmbsfj/ihlaf0zkjrgdivmwscnraowuoh78y2icb/yiy09an6ah2bdu/ub+yxopyshqievnvu0durgdt8qec8pdw7fpji3fea4z/pej6yob5hkh4dj3evxhxpqh/skuy3rj7srz4fznh1pmatphwp6fl2pmjmpdgeq4ry8yt6gzao0eaea409duggmtnfnocscieilmgxciti6cq5dzud3qmp10vo0laltd2cjn4foumlc7luybsqczfkutrg7g6jkzky0rmdly680cdnej+umkpffe1rn7nxdvpxrc4attnauronyerczg2yvmln/d/gczfeimre/fs/bouq29zmn8tlooraxgzgga78yo9/cnxm2bpagvq25dv9s4e9+5sic9pqupjkhyfssl47+qcr1mynaaaaenptw0ckwkaaamdzja8q7oujvklspfz6zfverpy8qhh2yer+3i/bp83vibllyssokimrqkqpa2hp6+jq6rsyghmbmjqzsy0sraxtbo3shrydnemu4ur6yx7jjxvep7wrdycaaaaaaah//wacenpjygrgyoabyhkgzgjczgznbkyglqztijsflmyaaaw3algaenolizekgdaqbcchrbc2sfer0yd6qvqibcv/h9ezgi6z5xbaw8cbk/m5iqqvauvbxlnormzv2oldkfa8pjuru2hjzgabmoslznmzvutpb3n42mngzgbg4gkqyzbhymxjlmlj4gbgayow/p/pajjhlm6ssowkfwcaawdajgbraab42mngygbkaiibczo5iprmun0hga0ao8eftqaa") format("woff");font-weight:400;font-style:normal}
.gems-section{color:#667280}
.gems-section-header{padding:12px 16px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between}
.gems-section-header + .gems-section-content{padding-top:0}
.gems-section-title{font-size:16px;line-height:24px;font-weight:600;font-style:normal;color:#14171a;display:flex;align-items:center;}
.gems-section-title .num{width:30px;height:30px;background-color:#111;border-radius:50%;z-index:3;text-align:center;line-height:30px;font-size:18px;color:#fff;display:inline-block;margin-right:10px;}
.gems-section-more{font-size:12px;line-height:18px;cursor:pointer}
.gems-section-content{padding:16px;font-size:12px;line-height:22px}
.gems-section-pc{padding:0 0 24px}
.gems-section-pc .gems-section-title{font-size:24px;line-height:30px;margin-bottom: 25px;}
.gems-section-pc .gems-section-content,.gems-section-pc .gems-section-header{padding:0}
@font-face{font-family:dincond-bold;src:url(//cdn-cos-ke.myoed.com/ke_proj/core/_next/static/media/dincond-bold.020cc6ba.woff) format("woff");font-weight:400;font-style:normal}
.teacher-card{-webkit-align-items:flex-start;align-items:flex-start;padding:24px;border-radius:8px;box-shadow:0 4px 30px rgba(0,80,179,.08)}
.teacher-card:hover{box-shadow:0 8px 30px rgba(0,80,179,.12)}
.teacher-card:hover .list-item-center .list-item-title{color:#18a058}
.teacher-card .list-item-avatar{width:100px;height:100px;margin:0 36px 0 0}
.teacher-card .list-item-avatar img{object-fit:cover}
.teacher-card .list-item-center{-webkit-flex:1;flex:1}
.teacher-card .list-item-center .list-item-title{font-size:16px;line-height:22px;font-weight:500;color:#14171a}
.teacher-card .list-item-center .list-item-description{font-size:16px;line-height:22px;color:#667280}
.teacher-card .list-item-center .list-item-description p{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;margin:8px 0 0}
.agency-pc-wrapper .section-content{position:relative;margin:20px auto;width:1180px}
.agency-pc-wrapper .section-content.is-fill{width:100%}
.tab---rbuzqp{position:relative;-webkit-flex:0 0 auto;flex:0 0 auto;padding:0 24px;text-align:center;height:44px;line-height:44px;font-size:12px;color:#0f1419;cursor:pointer}
.active---p8nsny{font-weight:700}
.indicator---a5p1my{position:absolute;bottom:0;width:16px;height:3px;border-radius:1.5px;background-color:#18a058;transition:.3s;-webkit-transform:translatex(-50%);transform:translatex(-50%)}
.tabs---hx_hve{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;background-color:#fff}
.tabs-container---e4n9rh{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.tabs-container---e4n9rh::-webkit-scrollbar{display:none}
.tabs-wrap---vva0ez{display:-webkit-flex;display:flex;min-width:100%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}
.list-item{display:-webkit-flex;display:flex;position:relative;background-color:#fff;padding:12px 16px}
.list-item-left{-webkit-flex:none;flex:none}
.list-item-avatar{width:32px;height:32px;margin-top:4px;margin-right:12px}
.list-item-avatar img{width:100%;height:100%;max-width:100%;max-height:100%;border-radius:50%}
.list-item-center{-webkit-flex:5;flex:5;overflow:hidden;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center}
.list-item-description{font-size:12px;line-height:16px;color:#999;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal}
.list-item-title{font-size:12px;line-height:20px;color:#212121;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal}
.list-item-title + .list-item-description{margin-top:5px}
.list-item--round{border-radius:12px}
.list-item--theme-white{background-color:#fff}
.list-item--theme-white:active{background-color:#f5f8fa}
.list-item--split:after{content:"";left:16px;right:0;bottom:0;height:1px;background-color:#e1e2e4;-webkit-transform:scaley(.5);transform:scaley(.5);position:absolute}
.list-item--split:last-child:after{display:none}
.kc-row---ui88rw{display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap}
.kc-row---ui88rw > .kc-col---oajwb7{word-break:break-all;box-sizing:border-box}
.kc-row---ui88rw > .kc-col-span-3---at9nxe{-webkit-flex:0 0 20%;flex:0 0 20%;max-width:20%}
.kc-row-gutter-h-24---gjw3p8{margin-left:-12px;margin-right:-12px}
.kc-row-gutter-h-24---gjw3p8 > .kc-col---oajwb7{padding-left:12px;padding-right:12px}
.kc-row-gutter-v-24---nbudvm{margin-top:-12px;margin-bottom:-12px}
.kc-row-gutter-v-24---nbudvm > .kc-col---oajwb7{padding-top:12px;padding-bottom:12px}
.kc-row-justify-start---g7bndv{-webkit-justify-content:flex-start;justify-content:flex-start}
.kc-row-align-stretch---szsozo{-webkit-align-items:stretch;align-items:stretch}
.kc-row-align-stretch---szsozo > .kc-col---oajwb7 > div{height:100%;box-sizing:border-box}
.kc-row-equal-split---biozze > .kc-col---oajwb7{-webkit-flex:1;flex:1;width:0;flex-basis:content}
.nav-share-wrapper{position:relative;display:inline-block}
.kc-course-card-tag---et_va3{padding:0 4px;border-radius:4px;font-size:12px;line-height:1.5;font-weight:500;font-style:normal}
.kc-course-card-tag-chapter---bvieiq{line-height:1.4;color:#fff;background:rgba(0,0,0,.5)}
.kc-course-card-name---quovpq{word-break:break-all;font-weight:500}
.kc-course-card-label---kf4sn3{position:relative;max-width:100%;padding:0 4px;border-radius:4px;overflow:hidden;color:#667280;background:#f0f0f0;text-overflow:ellipsis;white-space:nowrap}
.kc-course-card-label---kf4sn3.kc-course-card-rank---xvfka7{background:rgba(255,197,82,.2);border-radius:4px}
.kc-course-card-label---kf4sn3.kc-course-card-rank---xvfka7 .kc-course-card-rank-detail---wvqbge,.kc-course-card-label---kf4sn3.kc-course-card-rank---xvfka7 .kc-course-card-rank-type---racg1e{padding:0 4px;font-weight:600;line-height:1.83}
.kc-course-card-label---kf4sn3.kc-course-card-rank---xvfka7 .kc-course-card-rank-type---racg1e{border-radius:4px 0 0 4px;background:linear-gradient(258.79deg,#ecce9f,hsla(37,67%,77%,0));color:#9e651c}
.kc-course-card-label---kf4sn3.kc-course-card-rank---xvfka7 .kc-course-card-rank-detail---wvqbge{color:#cb913b}
.kc-course-card-price---iwveta{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-right:6px;color:#ff7a38}
.kc-course-card-price-current---iuq7ly{height:20px;font-size:16px;font-weight:500}
.kc-course-card-price-current---iuq7ly .kc-course-card-price-icon---ujvcik{font-size:12px}
.kc-course-card-price-current---iuq7ly .kc-course-card-price-icon---ujvcik{margin-right:2px}
.kc-course-card---bw18de{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;border-radius:6px}
.kc-course-card---bw18de .kc-course-card-wrapper---d86vd2{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;border-radius:inherit}
.kc-course-card---bw18de a{text-decoration:none;color:#3e454d}
.kc-course-card---bw18de a:visited{color:#3e454d}
@media (hover:hover){.kc-course-card---bw18de a:hover{color:#18a058}
}
@media (hover:none){.kc-course-card---bw18de a:active{color:#18a058}
}
.kc-course-card-img---lykvky{position:relative;border-radius:inherit;background:url(//cdn-cos-ke.myoed.com/ke_proj/core/_next/static/media/default-248.13c44b35.png) 50%/100% no-repeat;overflow:hidden}
.kc-course-card-img---lykvky img{width:100%;height:100%;object-fit:fill}
.kc-course-card-img---lykvky .kc-course-card-tag---et_va3{position:absolute;margin:8px}
.kc-course-card-img---lykvky .kc-course-card-tag-chapter---bvieiq{bottom:0;right:0}
.kc-course-card-txt---og3wmy{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;border-radius:inherit}
.kc-course-card-txt---og3wmy .kc-course-card-header---hludhk{-webkit-flex:1;flex:1;margin:0 0 6px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kc-course-card-txt---og3wmy .kc-course-card-desc---pewxja{display:-webkit-flex;display:flex;-webkit-align-items:flex-start;align-items:flex-start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-flex-flow:wrap;flex-flow:wrap;-webkit-flex-direction:row;flex-direction:row;overflow:hidden;color:#8493a6}
.kc-course-card-txt---og3wmy .kc-course-card-desc---pewxja:not(:empty){margin:0 -2px 6px}
.kc-course-card-txt---og3wmy .kc-course-card-desc---pewxja .kc-course-card-label---kf4sn3{margin:0 2px 2px}
.kc-course-card-txt---og3wmy .kc-course-card-footer---nsol7l{color:#8493a6}
.kc-course-card-txt---og3wmy .kc-course-card-footer---nsol7l .kc-course-card-footer-info---insdzi{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-flow:wrap;flex-flow:wrap;max-height:20px;line-height:20px;overflow:hidden}
.kc-course-card-txt---og3wmy .kc-course-card-footer-row---uvlcfj{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between}
.kc-course-card-txt---og3wmy .kc-course-card-footer-row---uvlcfj .kc-course-card-footer-info---insdzi{-webkit-flex:1;flex:1}
.kc-course-card-vertical---wn2jxt .kc-course-card-wrapper---d86vd2{-webkit-flex-direction:column;flex-direction:column}
.kc-course-card-vertical---wn2jxt .kc-course-card-img---lykvky:before{content:"";display:block;padding-top:56.45%}
.kc-course-card-vertical---wn2jxt .kc-course-card-img---lykvky img{position:absolute;top:0;left:0}
.kc-course-card-vertical---wn2jxt .kc-course-card-txt---og3wmy{padding:8px 0 0}
.kc-course-card-vertical---wn2jxt .kc-course-card-txt---og3wmy .kc-course-card-desc---pewxja{display:-webkit-flex;display:flex;-webkit-flex-flow:wrap;flex-flow:wrap;overflow:hidden}
.kc-course-card-large---rt9gr_ .kc-course-card-header---hludhk{margin-bottom:8px;font-size:16px;line-height:24px}
.kc-course-card-large---rt9gr_ .kc-course-card-desc---pewxja{font-size:12px;line-height:22px;max-height:22px}
.kc-course-card-large---rt9gr_ .kc-course-card-footer---nsol7l{margin-top:6px;font-size:14px}
.kc-course-card-large---rt9gr_.kc-course-card-vertical---wn2jxt .kc-course-card-img---lykvky{border-bottom-left-radius:0;border-bottom-right-radius:0}
.kc-course-card-fixed-height---tdsevk.kc-course-card-large---rt9gr_ .kc-course-card-header---hludhk{-webkit-flex:0 0 48px;flex:0 0 48px}
.kc-course-card-color---mzajfq .kc-course-card-wrapper---d86vd2{background:#fff;box-shadow:0 4px 16px rgba(0,80,179,.04)}
.kc-course-card-color---mzajfq.kc-course-card-vertical---wn2jxt .kc-course-card-txt---og3wmy{padding:12px}
.kc-course-card-color---mzajfq.kc-course-card-vertical---wn2jxt.kc-course-card-large---rt9gr_ .kc-course-card-wrapper---d86vd2{box-shadow:0 4px 30px rgba(0,80,179,.08)}
.kc-course-card-color---mzajfq.kc-course-card-vertical---wn2jxt.kc-course-card-large---rt9gr_ .kc-course-card-wrapper---d86vd2:hover{box-shadow:0 8px 30px rgba(0,80,179,.12)}
.kc-course-card-color---mzajfq.kc-course-card-vertical---wn2jxt.kc-course-card-large---rt9gr_ .kc-course-card-txt---og3wmy{padding:8px 12px 16px}
.kc-course-card-radius-8---dl8h0i{border-radius:8px}
.gems-section-content-box{position:relative;}
.gems-section .studyed-box{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;}
.gems-section .studyed-box .left{background-size:cover;background-position:center;}
.gems-section .studyed-box .left .title-box{height:28px;background-size:cover;background-position:center;margin:0 0 20px 0}
.gems-section .studyed-box .left ul.content-box{display:flex;justify-content:space-between;flex-wrap:wrap;background:#f6f9fa;padding:20px;border-radius:20px;}
.gems-section .studyed-box .left ul.content-box li{width:380px;font-size:16px;color:#1c1e20;letter-spacing:0;line-height:32px;text-overflow:ellipsis;word-break:break-all;word-wrap:break-word;overflow:hidden;text-overflow:-o-ellipsis-lastline;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
.gems-section .studyed-box .left ul.content-box li::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;background:#1c1f21;border-radius:50%;vertical-align:middle}
.gems-section .studyed-box .right{}
.try-see-container{width:480px;height:240px;box-sizing:content-box;background:#fff;box-shadow:0 4px 8px 0 rgba(28,31,33,.1);border-radius:12px}
.try-see-container .top{width:100%;height:174px;position:relative;cursor:pointer;background-size:100%}
.try-see-container .top .mask{position:absolute;top:0;left:0;width:310px;height:174px;background:rgba(28,31,33,.8);border-radius:4px 4px 0 0}
.try-see-container .top .center-icon{width:68px;height:68px;background-size:cover;background-position:center;position:absolute;top:34px;left:204px;z-index:10;}
.try-see-container .top .media-time{width:100%;position:absolute;top:110px;left:0;text-align:center;font-size:14px;color:#fff;font-weight:600;z-index:10;}
.try-see-container .bottom{height:100%;height:46px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#1c1f21;font-weight:600}
.try-see-container .bottom .middle{width:170px;margin:0 16px;text-overflow:ellipsis;word-break:break-all;word-wrap:break-word;overflow:hidden;text-overflow:-o-ellipsis-lastline;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;text-align:center}
#video-wrap{position:fixed;overflow-y:scroll;box-sizing:border-box;width:100%;height:100%;top:0;left:0;z-index:101;background:rgba(0,0,0,.8);display:none}
#video-wrap #video-box{width:800px;top:100px;left:50%;margin-left:-400px;padding-bottom:16px;position:relative;background:#545c63;box-shadow:0 8px 16px 0 rgba(28,31,33,.4);border-radius:12px}
#video-wrap #video-box .video-title{height:64px;position:relative;padding-left:32px;padding-top:24px;box-sizing:border-box}
#video-wrap #video-box .video-title h2{font-size:16px;line-height:24px;color:#fff;font-weight:700}
#video-wrap #video-box .video-title .close-mediaview{position:absolute;font-size:22px;color:#fff;right:32px;top:24px;z-index:10001;cursor:pointer}
#video-wrap #video-box #try-video-container{width:100%;height:450px;position:relative}
#video-wrap #video-box .try-video-container{width:100%;height:450px;position:relative;display:none}
#video-wrap #video-box .video-list{width:100%}
#video-wrap #video-box .video-list li{width:100%}
#video-wrap #video-box .video-list li .ui-media-title{width:100%;height:54px;line-height:54px;padding:0 32px;box-sizing:border-box;display:inline-block}
#video-wrap #video-box .video-list li .ui-media-title i{font-size:18px;color:rgba(255,255,255,.6);vertical-align:text-top;margin-right:6px}
#video-wrap #video-box .video-list li .ui-media-title .right-box{display:inline-block;width:705px;border-bottom:1px solid rgba(255,255,255,.1)}
#video-wrap #video-box .video-list li .ui-media-title .right-box .title{font-size:14px;color:rgba(255,255,255,.6);display:inline-block;width:640px;font-weight:700}
#video-wrap #video-box .video-list li .ui-media-title .right-box .state{display:inline-block;float:right;color:#fff;font-size:14px}
#video-wrap #video-box .video-list li.active .right-box .title,#video-wrap #video-box .video-list li.active i,#video-wrap #video-box .video-list li:hover .right-box .title,#video-wrap #video-box .video-list li:hover i{color:#fff}
#video-wrap #video-box .video-list li:last-child .right-box{border-bottom:none}
.course-case-container .title-box{overflow:hidden;margin-bottom:30px}
.course-case-container .title-box .left{width:117px;height:31px;float:left;background-size:cover;background-position:center;background-size:100% 100%}
.course-case-container .case-box{height:660px;margin:0 auto;background:#f0f0f0;box-sizing:border-box;overflow:hidden;position:relative;padding:2px;border-radius:4px;}
.course-case-container .case-box .carousel-img{width:100%;height:100%;}
.course-case-container .swiper-case-btn{display:none;position:absolute;top:274px;width:35px;height:70px;background-size:cover;opacity:1;cursor:pointer}
.course-case-container .swiper-case-btn:hover{opacity:.5}
.course-case-container .swiper-case-button-prev{left:0;background-size:cover;background-position:center}
.course-case-container .swiper-case-button-next{right:0;background-size:cover;background-position:center}
.course-case-container .my-button-disabled{display:none}
.course-case-container .swiper-case-pagination{text-align:center;line-height:1;margin-top:30px}
.course-case-container .swiper-case-pagination .swiper-pagination-bullet{width:12px;height:12px;margin:0 4px}
.course-case-container .swiper-case-pagination .swiper-pagination-bullet-active{width:36px;height:12px;background:#ff7d59;border-radius:6px}
.txnlea-oob .box{width:100%;overflow:hidden;padding:0px 0px;display:flex;justify-content:space-between;}
.txnlea-oob .txn-item{width:33.33333%;height:150px;background:#f6f9fa;border-radius:12px;float:left;margin-right:15px;padding-bottom:20px;pointer-events:auto}
.txnlea-oob .txn-item .item-title{font-size:16px;color:#1c1e20;text-align:center;line-height:24px;font-weight:600;margin:22px 0 6px 0}
.txnlea-oob .txn-item .tipbox-cont-box{height:72px;overflow:hidden;padding:0 29px 0 35px}
.txnlea-oob .txn-item .tipbox-cont-box .cont-box{text-align:center}
.txnlea-oob .txn-item .tipbox-cont-box .cont-box .tipbox-cont{font-size:14px;color:#1c1f21;line-height:24px;font-weight:400;}
.txnlea-oob .txn-item .tipbox-cont-box .cont-box .tipbox-cont .cont-l{font-weight:500;display:inline-block;margin-right:5px;vertical-align:top;margin-top:2px}
.txnlea-oob .txn-item .tipbox-cont-box .cont-box .tipbox-cont .cont-r{display:inline-block;max-width:150px;word-wrap:break-word;word-break:break-all;line-height:22px;vertical-align:text-top}
.txnlea-oob .txn-item:hover{height:auto;min-height:150px;transition:all .1s;-moz-transition:all .1s;-webkit-transition:all .1s;-o-transition:all .1s;position:relative;z-index:5;border-radius:8px;box-shadow:0 8px 16px 0 rgba(7,17,27,.2);background-color:#f6f9fa}
.txnlea-oob .txn-item:hover .tipbox-cont-box{position:relative;z-index:5;height:auto;padding:0 29px 28px 35px!important}
.txnlea-oob .txn-item:last-child{margin-right:0}
.kc-agency-hd-pc .kc-sticky-holder .agency-bottom-ctn{position:relative;height:68px;background:#fff;box-shadow:0 8px 20px rgba(0,80,179,.12);border-radius:8px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between}
.kc-agency-hd-pc .kc-sticky-holder.fixed .agency-bottom-ctn{border-radius:0!important;}
.buytip{position: absolute;top:-75px;background:#f6f9fa;border-radius:6px;color:#111;padding:10px;line-height: 18px;display: none;}
.buybtn:hover .buytip{display: block;}
#n50,
#n2,
#n4,
#n6,
#n8,
#n10,
#n12,
#n14,
#n16,
#n18,
#n20,
#n4{background:#fff!important;padding: 40px 0}
#n51,
#n3,
#n5,
#n7,
#n9,
#n11,
#n13,
#n15,
#n17,
#n19,
#n21,
#n1{background: #f8f8f8;padding: 40px 0}

.banner-inner, .list-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
}
.banner-inner .list-item {
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  min-width: 211px;
  padding: 0 32px;
}

.banner-inner {
  justify-content: center;
  height: 100px;
  margin: -54px auto 35px;
  padding: 10px 27px 0;
  background: #fff;
  box-shadow: 0 2px 18px rgba(208, 213, 221, .45);
  border-radius: 20px;
}

.banner-inner .num {
  position: relative;
  margin-right: 4px;
  font-size: 22px;
  font-family: DIN_Condensed_Bold, sans-serif;
  font-weight: 700;
}

.banner-inner .time {
  height: 40px;
  font-weight: 700;
  margin-bottom: 11px;
  line-height: 58px;
  font-size: 20px;
  color: #f74845;
}

.banner-inner .numSuffix{
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  vertical-align: 2px;
}

.banner-inner .name{
  font-size: 13px;
  color: #333;
  line-height: 26px;
}


</style>